<template>
    <div>
        <!-- usrName-->
        <div v-show="$route.params.infoType == 'name' ">
            <div class="ipt_con">
              <i class="icon iconfont icon-tubiao06 clearIpt" v-show="inputInfo" @click="clearIpt"></i>
              <input type="text"  class="userIpt" ref="ipt" v-model="inputInfo" @keyup="nameInput" maxlength='7' />
            </div>
        </div>
        <!-- 性别-->
        <div v-show="this.$route.params.infoType == 'sex'" class="sex_box">
            <div class="iptLine" @click="changeSex('man')">
                <input type="radio" name="sex">
                <i class="icon iconfont icon-checked i_radio" v-show="inputInfo == 'man' "></i>
                男
            </div>
            <div class="iptLine" @click="changeSex('woman')">
                <input type="radio" name="sex">
                <i class="icon iconfont icon-checked i_radio" v-show=" inputInfo == 'woman' "></i>
                女
            </div>
            <div class="iptLine" @click="changeSex('secre')">
                <input type="radio" name="sex">
                <i class="icon iconfont icon-checked i_radio" v-show="inputInfo == 'secre' "></i>
                保密
            </div>
        </div>
        <!-- 我的二维码-->
        <div v-show="this.$route.params.infoType == 'code' " class="myCode">
            <div class="code_con">
                <div class="code_con_tit">二维码账户</div>
                <div class="code_img">
                   <div id="qrcode"></div>
                </div>
                <div class="code_user_info">
                    <div class="code_user_img">
                        <img :src="userUrl">
                    </div>
                    <div class="code_user_text">
                        <span>{{userInfo.usrName}}</span>
                        芸券号：{{userInfo.usrId}}
                    </div>
                </div>
                <div class="code_user_shadow"></div>
            </div>
            <receiving-coupon></receiving-coupon>
        </div>
        <!-- 选择省、市、区-->
        <div v-show=" this.$route.params.infoType == 'position' ">
            <input type="text"  class="userIpt" ref="ipt" v-model="inputInfo">
            <div class="addressCon" >
                <div class="addressBtn" @click="addressOk">确定</div>
                <mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5"></mt-picker>
            </div>
        </div>
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import { mapState } from 'vuex'
    import getData from '../../service/getData.js'
    import { Checklist,Picker } from 'mint-ui';
    import {address} from '../../assets/js/picker.js'
    import { Toast,Indicator} from 'mint-ui'
    import receivingCoupon from '../../componentes/global/receivingCoupon/index.vue'
    import 'src/assets/js/qrcode.js';
    import {Storage} from 'src/utils/storage.js'

    let param = {};
    export default {
        components: {
            'receiving-coupon':receivingCoupon,
            Picker,
        },
        data(){
        let me =this;
            return{
                inputInfo:'',
                // userInfo:{usrId:34},
                downloadButton: false,
                clickDo:false,
                addressCity:'',//地区
                defaultIndex:2,
                addressSlots: [
                    {
                        flex: 1,
                        values: Object.keys(address),
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }, {
                        flex: 1,
                        values: ['上海'],
                        className: 'slot3',
                        textAlign: 'center'
                    }
                ],
            }
        },
        computed:{
            ...mapState({
                    userInfo:state => state.user.userInfo,
                    userUrl:state => state.user.userUrl
            })
        },
        beforeRouteLeave(to, from, next) {
            if(this.$route.params.infoType == 'name'){
                this.saveInfo(function(){
                    next();
                },function(){
                    next();
                });
            }else{
                next();
            }


        },
        created() {
        	
        },
        mounted:function(){
            var me = this;
            this.$nextTick(function () {           
                this.qrcodeEvent();
                if(this.$route.params.infoType == 'name'){
                    this.inputInfo = this.userInfo.usrName;
                }else if(this.$route.params.infoType == 'sex'){

                    this.inputInfo = this.userInfo.usrSex || 'secre';
                }else if(this.$route.params.infoType == 'position'){

                    this.inputInfo = '上海';
                }
            })
        },
        methods:{
            clearIpt:function(){
                this.inputInfo = '';
            },
            saveInfo:function(fn,err){
                let me = this;

                // document.forms[0].target="rfFrame";
                if (me.clickDo) {
                    return

                }
                if(this.$route.params.infoType == 'name'){
                    if(!this.inputInfo.trim()){

                        Toast({
                            message: '信息不能为空',
                            duration: 800
                        });
                        return
                    }
                    param.usrName = this.inputInfo.trim();
                }else if(this.$route.params.infoType == 'sex'){
                    param.usrName = this.userInfo.usrName || '';
                    param.usrSex = this.inputInfo;
                }else if(this.$route.params.infoType == 'position'){
                    param.usrName = this.userInfo.usrName || '';
                    param.location = this.inputInfo;
                }
                // console.log(param);
                // let instance = Toast({
                //     message: '修改中',
                //     duration: 800
                // });
                // Indicator.open({
                //   text: '修改中...',
                //   spinnerType: 'fading-circle'
                // });
                me.$store.commit('changeState', true)
                me.clickDo=true;
                getData.changeUserInfo({method:'put',data:param},me.userInfo.usrId).then(rep => { //this.userInfo.usrId
                    if(rep.respCode == '00'){
                        me.updateInfo(param);//更新本地用户信息
                        Toast({
                            message: '修改成功',
                            duration: 800
                        });
                        if(me.$route.params.infoType == 'name'){
                            fn();
                        }
                        setTimeout(function(){me.clickDo = false;},300);
                    }else{
                        Toast({
                            message: '修改失败',
                            duration: 800
                        });
                        setTimeout(function(){me.clickDo = false;},300);
                    }
                }).catch(rep => {
                    alert("网络异常");
                    err()
                })
                setTimeout(function(){me.clickDo = false;},300);
            },
            changeSex:function(sex){
                this.inputInfo = sex;
                this.saveInfo();
                return false;
            },
            updateInfo:function(){
                let usrInfo1 = this.userInfo;
                Object.assign(usrInfo1,param);
                this.$store.commit("change_userInfo",usrInfo1);
                Storage.set("user",usrInfo1,true);

            },
            onAddressChange(picker, values) {
            	document.getElementsByClassName('slot3')[0].getElementsByClassName('picker-item')[0].style.top='0'
                picker.setSlotValues(1, address[values[0]]);
                this.addressProvince = values[0];
                this.addressCity =values[1];
                
            },
            addressOk:function(){
                this.inputInfo = this.addressCity||'上海';
                this.saveInfo();
//                 console.log(11111);
                // window.history.back(-1);
            },
            qrcodeEvent:function(){
                let me = this;
                var qrcode;
                 let divCode = document.getElementsByClassName("code_img")[0]
                qrcode = new QRCode(document.getElementById("qrcode"), {
                    width :divCode.offsetWidth,//设置宽高
                    height : divCode.offsetHeight
                });
                //qrcode.makeCode(me.userInfo.usrId + '');
                //二维码生成
                let usr = {};
                usr.usrId = me.userInfo.usrId.toString();
                let str = `YQ://P=00&SC=00&V=` + JSON.stringify(usr);
                qrcode.makeCode(str);
            },
            // 昵称输入时
            nameInput:function(){
                // console.log(this.inputInfo.length)
                // if (this.inputInfo.length>=18) {

                //     Toast({
                //         message: '超过字数',
                //         duration: 800
                //     });
                // }
            }

        }
    }
</script>
<style scoped="scoped">

</style>
<style type="text/css">
	.slot3 .picker-item:nth-of-type(1){
	top: 5rem;
}
</style>
